<?php
@session_start();
$loading = 'Load on session';
include_once 'main.inc.php';
include_once 'functions.php';
include_once 'functions.datastore.php';

// Learned
if (!isset($_SESSION[$session_key]['card_info'])) {
    $card_info = get_en_card_info();
    $_SESSION[$session_key]['card_info'] = $card_info;
}
$card_info = $_SESSION[$session_key]['card_info'];

include_once 'load_vocab.inc.php';
include_once 'inc/cookie.inc.php';

// Shuffle
$shuffle = 0;
$shuffle_overturn = ($shuffle == 1 ? 0 : 1);
if (isset($_GET['month'])) {
    $_SESSION[$session_key]['month'] = $_GET['month'];
} elseif (!isset($_SESSION[$session_key]['month'])) {
    $_SESSION[$session_key]['month'] = current(array_keys($vocab->assoc_data));
}
$month = $_SESSION[$session_key]['month'];
if (isset($_GET['day'])) {
    $_SESSION[$session_key]['day'] = $_GET['day'];
} elseif (!isset($_SESSION[$session_key]['day'])) {
    $_SESSION[$session_key]['day'] = key($vocab->assoc_data[$month]);
}
$day = $_SESSION[$session_key]['day'];
$date_time = strtotime("2014-${month}-${day}");
// Auto-learn mode
if (!isset($_COOKIE[$session_key.'-auto_learn'])) $_COOKIE[$session_key.'-auto_learn'] = 1;
$auto_learn = $_COOKIE[$session_key.'-auto_learn'];
$auto_learn_overturn = ($auto_learn == 1 ? 0 : 1);
$show_e = 'hide';
$show_v = 'hide';
$show_a = 'hide';
?>
<?php // FOR TEMPLATE
$page = 'test';
$lang = 'en';
$year = '2014';
$styles_enqueued = array(
    array('src' => '../inc/test/style.css')
);
include_once('header.inc.php');
?>
<div class="container">
    <div class="row">
        <div class="col-md-8">
            <div class="panel panel-default pull-right">
                <?php include_once('inc/card_info_panel.inc.php');?>
            </div>
            <h4>Test [<?php echo $vocab->card_tested_correct_count . '][' . $vocab->card_tested_incorrect_count;?>]</h4>
            <div class="clear"></div>
            <?php
            echo '<div style="float: left">
                    <a class="btn btn-primary btn-sm" href="' . $base_url . '" title="Refresh">
                        <span class="glyphicon glyphicon-refresh"></span>
                    </a>
                    <a class="btn btn-primary btn-sm" href="?reload=1" title="Reload remote">
                        <span class="glyphicon glyphicon-repeat"></span>
                    </a>
                    <a id="btn_reset" class="btn btn-default btn-sm" title="Reset card">
                        <span class="glyphicon glyphicon-retweet"></span>
                    </a>
                </div>';
            echo '<div class="btn-group" style="float: right">
                    <a id="btn_auto_learn" class="btn btn-default '.($auto_learn == 1 ? 'active' : '').' btn-sm" title="Shuffle">
                        <span class="glyphicon glyphicon-book"></span>
                    </a>
                    <a id="btn_shuffle" class="btn btn-default '.($shuffle == 1 ? 'active' : '').' btn-sm" title="Shuffle">
                        <span class="glyphicon glyphicon-random"></span>
                    </a>
                    <a class="btn btn-default btn-sm" id="btn_tested" title="Mark as tested">
                        <span class="glyphicon glyphicon-ok"></span>
                    </a>
                </div>';
            echo '<div style="clear: both"></div>
                <hr />';
            echo '<table class="words"><tr><th style="10%">
                <a class="display_mode" id="a_show">
                    <span class="glyphicon ' . ($show_a == 'show' ? 'glyphicon-sort' : 'glyphicon-list') . '"></span>
                </a>
            </th>
            <th style="width: 30%"><a class="display_mode" id="e_show">English</a></th>
            <th style="width: 60%"><a class="display_mode" id="v_show">Vietnamese</a></th></tr>';
            shuffle_assoc($vocab->learned_data);
            $day_words = array();
            for ($index = 1; $index <= 10; $index++) {
                $day_word = $vocab->learned_data[$index-1];
                $day_words[] = $day_word;
                $date_time = strtotime('2014-' . $day_word['month'] . '-' . $day_word['day']);
                $word_learned_count = $day_word['learned'];
                echo '<tr id="row_word_' . $index . '" class="word_row">
                <td>
                    <div class="btn-group">
                        <a class="btn btn-link btn-xs dropdown-toggle" data-toggle="dropdown">
                            <span id="test_word_result_'.$index.'" class="glyphicon glyphicon-time"></span> <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="disabled">
                                <a href="'. $base_url . '/learn?month='.$day_word['month'].'&day='.$day_word['day'].'">' .
                                date("D, M j", $date_time) . " [{$word_learned_count}]" .
                                '</a>
                            </li>
                <li class="divider"></li>
                <li id="test_word_pending_' . $index . '" class="test_word-opt">
                                <a><span class="glyphicon glyphicon-time"></span> Wait</a>
                            </li>
                            <li id="test_word_correct_' . $index . '" class="test_word-opt">
                                <a><span class="glyphicon glyphicon-thumbs-up"></span> Correct</a>
                            </li>
                            <li id="test_word_incorrect_'.$index.'" class="test_word-opt">
                                <a><span class="glyphicon glyphicon-thumbs-down"></span> Incorrect</a>
                            </li>
                        </ul>
                    </div>
                </td>
                <td class="word e_word" id="e_word_' . $index . '"><span class="'.$show_e.'"></span></td>';
                echo '<td class="word v_word" id="v_word_' . $index . '"><span class="'.$show_v.'">';
                echo '</span></td></tr>';
            }
            echo '</table>';
            ?>
        </div>
        <div class="col-md-4 sidebar">
            <nav><strong>Legends:</strong>
                <a class="btn btn-default btn-xs rank-0">0</a>
                <a class="btn btn-default btn-xs rank-1">1+</a>
                <a class="btn btn-default btn-xs rank-3">3+</a>
                <a class="btn btn-default btn-xs rank-6">6+</a>
                <a class="btn btn-default btn-xs rank-10">10+</a>
                <a class="btn btn-default btn-xs rank-15">15+</a>
                <a class="btn btn-default btn-xs rank-21">21+</a>
            </nav><hr />
            <nav>
                <ul>
                    <?php
                    foreach ($vocab->assoc_data as $the_month => $the_day_words) {
                        echo '<li>';
                        echo '<strong>' . $the_month . ':</strong> ';
                        foreach ($the_day_words as $the_day => $words) {
                            $wi_key = "{$the_month}-{$the_day}";
                            $rank = 0;
                            if (isset($card_info[$wi_key])) $rank = $card_info[$wi_key];
                            if ($rank > 21) $rank = 21;
                            $href = '';
                            $current = ' current';
                            if (($the_month != $month) || ($the_day != $day)) {
                                $href = ' href="?month=' . $the_month . '&day=' . $the_day . '"';
                                $current = '';
                            }
                            $day_word_class = '';
                            if (sizeof($words) < 10) $day_word_class = ' less_words';
                            elseif (sizeof($words) > 10) $day_word_class = ' more_words';
                            echo '<a class="btn btn-default btn-xs rank-' . $rank. $current . $day_word_class . '"' . $href . '>' . $the_day . '</a> ';
                        }
                        echo '</li>';
                    }
                    ?>
                </ul>
            </nav>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <hr />
            <?php echo $loading?>
        </div>
    </div>
</div>

<!--<div class="modal fade word-operation-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">-->
<!--    <div class="modal-dialog modal-sm">-->
<!--        <div class="modal-content">-->
<!--            <div class="modal-header">-->
<!--                <button type="button" class="close" data-dismiss="modal">-->
<!--                    <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>-->
<!--                </button>-->
<!--                <h4 class="modal-title">-->
<!--                    <a id="btn_learned_bookmark" class="btn btn-default btn-sm" title="Reset card">-->
<!--                        <span class="glyphicon glyphicon-bookmark"></span>-->
<!--                    </a>-->
<!--                    <a id="btn_learned_speak" class="btn btn-default btn-sm" title="Reset card">-->
<!--                        <span class="glyphicon glyphicon-volume-up"></span>-->
<!--                    </a>-->
<!--                </h4>-->
<!--            </div>-->
<!--            <div class="modal-body"></div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
//    var modal_id = 0;
    var day_words = <?php echo json_encode($day_words)?>;
    var keys;
    var keys_shf;
    var a = '<?php echo $show_a?>', e = "<?php echo $show_e?>", v = "<?php echo $show_v?>";
    var is_shuffled = <?php echo $shuffle?>;
    $(document).ready(function(){
        keys = Object.keys(day_words);
        load_day_words();

        $('.test_word-opt').click(function(){
            var id = $(this).attr('id');
            var parts = id.split('_');
            var index = parts[3];
            var result = parts[2];
            var test_word_result_id = '#test_word_result_' + index;
            if (result == 'correct') {
                $(test_word_result_id).removeClass('glyphicon-time');
                $(test_word_result_id).removeClass('glyphicon-thumbs-down');
                $(test_word_result_id).addClass('glyphicon-thumbs-up');
            } else if (result == 'incorrect') {
                $(test_word_result_id).removeClass('glyphicon-time');
                $(test_word_result_id).removeClass('glyphicon-thumbs-up');
                $(test_word_result_id).addClass('glyphicon-thumbs-down');
            } else {
                $(test_word_result_id).removeClass('glyphicon-thumbs-up');
                $(test_word_result_id).removeClass('glyphicon-thumbs-down');
                $(test_word_result_id).addClass('glyphicon-time');
            }
        });

        $('.btn-show').click(function(){
            var id = $(this).attr('id');
            var part = id.charAt(0);
            var mode = get_mode(part);
            if($(this).hasClass('active')) {
                $(this).removeClass('active');
                if (mode != 'show') swap(part);
                show_hide(part);
                $.cookie("<?php echo $session_key?>" + part, 0, { expires : 10 });
            } else {
                $(this).addClass('active');
                if (mode == 'show') swap(part);
                show_hide(part);
                $.cookie("<?php echo $session_key?>" + part, 1, { expires : 10 });
            }
        });

        $('#btn_tested').click(function() {
            if ($(this).hasClass('active')) {
                $(this).removeClass('active');
                $.cookie("<?php echo $session_key?>-correct", 0, { expires : 10 });
                $.cookie("<?php echo $session_key?>-incorrect", 0, { expires : 10 });
            } else {
                $(this).addClass('active');
                var correct = 0;
                var incorrect = 0;
                for (var i = 1; i <= 10; i++) {
                    var result_i = $('#test_word_result_' + i);
                    if (result_i.hasClass('glyphicon-thumbs-up')) correct += 0.5;
                    else if (result_i.hasClass('glyphicon-thumbs-down')) incorrect++;
                }
                $.cookie("<?php echo $session_key?>-correct", correct.toString(), { expires : 10 });
                $.cookie("<?php echo $session_key?>-incorrect", incorrect.toString(), { expires : 10 });
            }
        });

        $('#btn_shuffle').click(function(){
            if ($(this).hasClass('active')) {
                $(this).removeClass('active');
                is_shuffled = 0;
                $.cookie("<?php echo $session_key?>-shuffle", 0, { expires : 10 });
            } else {
                $(this).addClass('active');
                is_shuffled = 1;
                $.cookie("<?php echo $session_key?>-shuffle", 1, { expires : 10 });
            }
            load_day_words();
        });
        $('#btn_auto_learn').click(function(){
            if ($(this).hasClass('active')) {
                $(this).removeClass('active');
                $.cookie("<?php echo $session_key?>-auto_learn", 0, { expires : 10 });
            } else {
                $(this).addClass('active');
                $.cookie("<?php echo $session_key?>-auto_learn", 1, { expires : 10 });
            }
        });
        $('#btn_reset').click(function(){
            reset_day_words();
        });
    });
    function show_hide(part) {
        var mode = swap(part);
        $('.word').each(function(){
            var span = $('#' + $(this).attr('id') + ' > span');
            if ($(this).attr('id').charAt(0) == part) {
                span.attr('class', mode);
            }
        });
    }

    function show_hide_all() {
        if (a == 'show') set_mode_a('hide');
        else set_mode_a('show');
        e = a;
        v = a;
        $('.word').each(function(){
            var span = $('#' + $(this).attr('id') + ' > span');
            span.attr('class', a);
        });
        if (a == 'hide') {
            is_shuffled = true;
            load_day_words();
            reset_learned_layout();
            set_learned_layout();
        }
    }
    function load_day_words() {
        keys_shf = keys.slice();
        if (is_shuffled) shuffle(keys_shf);
        for (i = 0; i < keys_shf.length; i++) {
            var decorated_word = "";
            var meaning = "";
            if (day_words[keys_shf[i]] != null) {
                decorated_word = day_words[keys_shf[i]].decorated_word;
                meaning = day_words[keys_shf[i]].meaning;
            }
            $('#e_word_' + (i + 1) + ' > span').html(decorated_word);
            $('#v_word_' + (i + 1) + ' > span').html(meaning);
        }
    }
    function reset_day_words() {
        keys_shf = keys.slice();
        is_shuffled = false;
        set_mode_a('show');
        e = 'show';
        v = 'show';
        for (i = 0; i < keys_shf.length; i++) {
            $('#e_word_' + (i + 1) + ' > span').text(day_words[keys_shf[i]].word);
            $('#v_word_' + (i + 1) + ' > span').text(day_words[keys_shf[i]].meaning);
            $('#e_word_' + (i + 1) + ' > span').attr('class', a);
            $('#v_word_' + (i + 1) + ' > span').attr('class', a);
        }
        reset_learned_layout();
        clean_day_word_learned();
    }
</script>
<?php include_once('footer.inc.php')?>